﻿@using CleanArchitecture.Infrastructure.Entities
@using CleanArchitecture.Infrastructure.Models.Business.Columns;
@using CleanArchitecture.Web.FrontendUI;
@inject CleanArchitecture.Infrastructure.Interfaces.IWorkContext workContext
@{
    Layout = "~/Views/Shared/_FrontendLayout.cshtml";
    ColumnItemModel CurrentColumn = ViewBag.CurrentColumn as ColumnItemModel ?? null;
    IList<ColumnItemModel> AllColumns = ViewBag.AllColumns as List<ColumnItemModel> ?? null;
    ColumnItemModel RootColumn = ViewBag.RootColumn as ColumnItemModel ?? null;
    IList<ColumnItemModel> columnBreadCrumbs = ViewBag.BreadColumns as List<ColumnItemModel> ?? null;

    //人才招聘广告位
    //int advItemId = 4;  //AdvId 人才招聘广告位
    string advItemHashId = 4.IdEncode();
}
@section cssstyles{
    <style type="text/css">
        [v-cloak] { display: none; }
        .padding16 { padding: 0 16px; }
    </style>
}
@section csslinks {
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/ant-design-vue@1.6.0/dist/antd.min.css" />
}
<!--内页banner-->
<section class="zbannerbox">
    <p class="img">@Html.ShowImage(RootColumn.CoverImageUrl, RootColumn.Name)</p>
    <div class="titbox">
        <div class="main">
            <p class="tit wow flipInX">@RootColumn.Name</p>
            <p class="entit wow flipInX" data-wow-delay="0.4s">@RootColumn.SubTitle</p>
        </div>
    </div>
</section>

<!--面包屑-->
<div class="crumbbox">
    <div class="main">
        <p class="crumbs wow fadeInLeft">
            您的位置 ： <i></i>
            <a href="@Url.RouteUrl("Homepage")">首页</a> <span> > </span>
            @if (columnBreadCrumbs != null)
            {
                foreach (var column in columnBreadCrumbs)
                {
                    <span>@column.Name</span>
                    @if (columnBreadCrumbs.IndexOf(column) != columnBreadCrumbs.Count - 1)
                    {
                        <span> > </span>
                    }
                }
            }
        </p>
    </div>
</div>
<p class="h60"></p>

<div id="article-list" v-cloak>
    <a-locale-provider :locale="locale">
        <div>
            <div class="main" v-if="pagelistlayout === 'DefaultListPage' && totalcount > 0">
                <a-skeleton :loading="loading" active :paragraph="{ rows: 4 }" v-for="(item, index) in listData" :key="item.Id">
                    <a class="txtlist02 wow fadeInUp" :href="'/article/detail?columnhash='+item.ColumnIdHash + '&itemhash=' + item.IdHash">
                        <p class="tit">{{item.Title}}</p>
                        <div class="des">{{item.ContentOverView}}</div>
                        <span class="date">{{item.CreatedOnTime | formatDate('yyyy-MM-dd')}}</span>
                        <p class="dtl"><span>详情</span></p>
                    </a>
                </a-skeleton>
            </div>
            <!-- 合作案例列表 LeftImageList -->
            <div class="main" v-else-if="pagelistlayout === 'LeftImageList' && totalcount > 0">
                <a-skeleton :loading="loading" active :paragraph="{ rows: 4 }" v-for="(item, index) in listData" :key="item.Id">
                    <a class="imgtxtlist06 wow fadeInUp" :href="'/article/detail?columnhash='+item.ColumnIdHash + '&itemhash=' + item.IdHash">
                        <p class="clear"></p>
                        <div class="imgbox fl"><p class="img" :style="{backgroundImage:'url(' + item.CoverImageUrl | excludeImageId + ')'}"></p></div>
                        <div class="txt fr">
                            <p class="tit">{{item.Title}}</p>
                            <div class="des">{{item.ContentOverView}}</div>
                            <p class="date">{{item.CreatedOnTime | formatDate('yyyy-MM-dd')}}</p>
                        </div>
                        <p class="clear"></p>
                    </a>
                </a-skeleton>
            </div>
            <!--招聘列表-->
            <div class="main" v-else-if="pagelistlayout === 'JobList' && totalcount > 0">
                <div v-if="!_.isEmpty(advData)" class="jointop" :style="{backgroundImage:'url(' + advData.imgUrl + ')'}">
                    <p class="p1">{{advData.title}}</p>
                    <p class="p2">{{advData.desc}}</p>
                </div>
                <a-spin :spinning="loading">
                    <ul class="job_list">
                        <li class="wow fadeInUp" v-for="(item, index) in listData" :key="item.Id">
                            <div class="jobli">
                                <p class="tit">{{item.Title}}</p>
                                <span class="date">发布日期：{{item.CreatedOnTime | formatDate('yyyy-MM-dd')}}</span>
                            </div>
                            <div class="jobcontxt" v-html="item.Contents"></div>
                        </li>
                    </ul>
                </a-spin>
            </div>
            <div class="wow fadeInUp animated" v-else>
                <a-empty :image="emptyImage" />
            </div>
            <p class="h60"></p>
            <!--分页-->
            <div class="ta-c wow fadeInUp" v-if="totalcount > 0">
                <a-pagination :default-current="1"
                              :total="totalcount"
                              :item-render="pageItemRender"
                              @@change="onPageChange">
                </a-pagination>
            </div>
        </div>
    </a-locale-provider>
    <p class="h80"></p>
</div>

@section scripts{
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.25.3/moment.min.js"></script>
    <script src="https://unpkg.com/ant-design-vue@1.6.0/dist/antd.min.js"></script>
    <script src="https://unpkg.com/ant-design-vue@1.6.0/dist/antd-with-locales.min.js"></script>
    <script type="text/javascript">
    $(function () {
        var lodash = _;
        var languageCode = "@(workContext.WorkingLanguage.LanguageCode)";
        function padLeftZero(str) {
            return ('00' + str).substr(str.length);
        }
        layui.use(['layer'], function () {
            var layer = layui.layer;
            var vm = new Vue({
                el: "#article-list",
                data: {
                    loading: true,
                    locale: antd.locales.zh_CN,
                    emptyImage: antd.Empty.PRESENTED_IMAGE_SIMPLE,
                    columnid: "@CurrentColumn.Id.IdEncode()",
                    pagelistlayout: '@CurrentColumn.LayoutListTemplate',
                    page: 1,       //分页 当前页数
                    pagesize: @CurrentColumn.PageSize,  //分页 每页显示列数
                    pagesizeOptions: ['10', '20', '30'],
                    totalcount: 0, //后台返回分页列表记录总数
                    listData: [],
                    newsStatistics: [],
                    advItemHashId: "@advItemHashId",
                    advData: {}
                },
                filters: {
                    //过滤图片链接中的Id
                    excludeImageId(value) {
                        const isImgurlwithId = /^\d+;*/
                        if (isImgurlwithId.test(value)) {
                            const imguri = value.toString().split(";", 2).slice(1);
                            return imguri;
                        }
                        return '';
                    },
                    formatDate: function (date, fmt){
                        if (date === undefined) return '';
                        if (typeof date === 'string') date = new Date(date);
                        if (/(y+)/.test(fmt)) {
                            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                        }
                        let o = {
                            'M+': date.getMonth() + 1,
                            'd+': date.getDate(),
                            'h+': date.getHours(),
                            'm+': date.getMinutes(),
                            's+': date.getSeconds()
                        };
                        for (let k in o) {
                            if (new RegExp(`(${k})`).test(fmt)) {
                                let str = o[k] + '';
                                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
                            }
                        }
                        return fmt;
                    },
                },
                beforeMount: function () {
                    switch (languageCode) {
                        case "en":
                            this.locale = antd.locales.en_US;
                            break;
                        case "zh":
                        default:
                            this.locale = antd.locales.zh_CN;
                            break;
                    }
                    var pageSizeOptionStr = "@CurrentColumn.PageSizeOptions";
                    if (pageSizeOptionStr.trim() !== "") {
                        const sizeArr = lodash.split(pageSizeOptionStr, ',')
                        if (sizeArr.length > 0)
                            this.pagesizeOptions = sizeArr.map((item) => {
                                return typeof item === 'string' ? item.trim() : item.toString();
                            })
                    }
                    this.remoteLoadListData();
                    if (this.pagelistlayout === 'JobList')
                        this.onLoadAdvertiseData();
                },
                methods: {
                    remoteLoadListData: function () {
                        this.loading = true;
                        var me = this;
                        httpapi.fetchGet('/api/frontend/news/getnewslist', { columnhash: this.columnid, page: this.page, pagesize: this.pagesize }).then(res => {
                            if (!httpapi.checkResponse(res))
                                //输入信息校验错误
                                layer.msg(res.message);
                            else {//Success
                                me.loading = false;
                                me.totalcount = res.data.RecordsTotal;
                                me.listData = res.data.Data;
                                if (!lodash.isEmpty(res.data.CustomProperties)) {
                                    const newslistcount = res.data.CustomProperties.NewsStatistics;
                                    if (newslistcount !== null)
                                        me.newsStatistics = newslistcount;
                                }
                            }
                        }).catch(error => {
                            layer.msg('对不起，出现未知错误，请您联系系统管理员！');
                            console.log(error);
                        });
                    },
                    pageItemRender(current, type, originalElement) {
                        //http://www.itxst.com/ant-design-vue/e2yymebi.html
                        var prevText = "";
                        var nextText = "";
                        switch (languageCode) {
                            case "en":
                                prevText = "Previous";
                                nextText = "Next";
                                break;
                            case "zh":
                            default:
                                prevText = "上一页";
                                nextText = "下一页";
                                break;
                        }
                        if (type === 'prev') {
                            originalElement.children = undefined;
                            originalElement.text = prevText;
                            originalElement.data.class = originalElement.data.class + " padding16"
                            return originalElement;
                        } else if (type === 'next') {
                            originalElement.children = undefined;
                            originalElement.text = nextText;
                            originalElement.data.class = originalElement.data.class + " padding16"
                            return originalElement;
                        }
                        return originalElement;
                    },
                    onPageChange: function (pageNumber) {
                        this.page = pageNumber;
                        this.remoteLoadListData();
                    },
                    onLoadAdvertiseData: function () {
                        var self = this;
                        httpapi.fetchGet('/api/frontend/advertise/getadvertisebyhash', { hashid: this.advItemHashId }).then(res => {
                            if (!httpapi.checkResponse(res))
                                //输入信息校验错误
                                console.error(res.message);
                            else {//Success
                                let advItem = null;
                                if (res.data.ItemsJson) {
                                    if (typeof res.data.ItemsJson === 'string')
                                        advItem = JSON.parse(res.data.ItemsJson);
                                    else advItem = res.data.ItemsJson;
                                }
                                if (advItem !== null) {
                                    self.advData = advItem[0];
                                    $.wait(300).then(function () {
                                        up_list('.job_list', '.jobli', 'li', '.jobcontxt', 'xia');
                                    });
                                }                                    
                            }
                        }).catch(error => {
                            layer.msg('对不起，出现未知错误，请您联系系统管理员！');
                            console.log(error);
                        });
                    },
                },
            });
        });
    });
    </script>
}


